/**
 * data中url定义 list为查询列表
 */
import {
  getAction,
  postAction
} from '@/api/public'
/**
  * 搜索区域 v-model="filterForm.接口需要字段名"
  * <div class="filter-container">
        <el-form
          ref="filterForm"
          :model="filterForm"
          :rules="rules"
          inline
          label-width="120px"
          size="small"
        >
          <el-form-item
            prop="name"
            label="name"
          >
            <el-input v-model="filterForm.name" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <div>
            <el-form-item>
             <el-button type="primary" round @click="fetchData">查询</el-button>
             <el-button round @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
    </div>
  */

/**
  * 表格区域
  *
  *
     <div class="table-container app-main-content-box">
       <el-table
         :data="tableData"
         style="width: 100%"
         v-loading="loading"
         element-loading-text="加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255, 0.6)"
       >
         <el-table-column prop="sort" align="center" label="序号" width="50"></el-table-column>
         ... ... ...
       </el-table>
     </div>
  */

/**
  * 分页区域
  *
     <pagination-direction
        v-if="paginationConfig.total !== 0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
  */

export const MBSListMixin = {
  name: 'MBSListMixin',
  data() {
    return {
      loadListAction: {
        list: '',
        fieldKey: null,
        total: null,
        mustFillInFilterForm: false // 查询条件是否有必填项目，此参数将决定初始化时在created或者mounted里面调用fetchData-dom
      },
      /* 查询条件*/
      filterForm: {},
      /* 数据源 */
      loading: false,
      tableData: [],
      disableMixinCreated: false,
      /* 分页配置 */
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [5, 10, 15, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      rules: {}
    }
  },
  watch: {
    tableData(v) {
      console.log('v', v)
    }
  },
  created() {
    !this.disableMixinCreated && !this.loadListAction.mustFillInFilterForm && this.fetchData()
  },
  mounted() {
    !this.disableMixinCreated && this.loadListAction.mustFillInFilterForm && this.fetchData()
  },
  methods: {
    fetchData() {
      if (!this.loadListAction.list) return this.$message.error('请设置url.list属性!')
      this.loadListAction.mustFillInFilterForm && this.$refs.filterForm.validate(async(valid) => {
        if (valid) {
          this.loadData()
        }
      })
      !this.loadListAction.mustFillInFilterForm && this.loadData()
    },
    loadData() {
      const loadListAction = this.loadListMethods === 'get' ? getAction : postAction
      this.filterForm.pageNum = this.paginationConfig.page
      this.filterForm.pageSize = this.paginationConfig.pageSize
      const params = this.fetchFilterParams()
      console.log('params', params)
      this.loading = true
      loadListAction(this.loadListAction.list, params).then((res) => {
        if (res.code === 0) {
          this.paginationConfig.total = eval(`res.` + this.loadListAction.total)
          this.tableData = eval(`res.` + this.loadListAction.fieldKey)
        } else {
          this.tableData = []
          this.$message.warning(res.msg || '暂无信息')
        }
        this.loading = false
      }).catch(err => {
        this.tableData = []
        this.loading = false
        this.$message.error(err.msg)
      })
    },
    fetchFilterParams() {
      const params = Object.assign({}, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }!params.status && delete params.status
      // TODO 暂时解决门店id权限问题 不是总部强制查询当前门店id
      // if (this.userShopId !== 0) {
      //   params.storeId = this.shopOptions[0].storeId
      // }
      return params
    },
    reset() {
      this.$refs.filterForm.resetFields()
    },
    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },
    /**
     * 方法组
     */
    // 合并单元格
    arraySpanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      if (rowIndex % 2 == 0) {
        return [1, 10]
      }
    }
  }

}
